<template>
  <!-- 增删改查
  查:1  增:2  删改:3
   查：
     1：定义api
     2:导入api
     3:进入页面调用获取数据存储
     4：渲染数据
     问题：数据并不是树形结构

   增：
     1：点击新增打开弹框
     2：完成内部表单
     3：点击确定调用新增的api接口完成新增
         定义api
         导入
         点击确定在全局表单验证通过后调用
     4：新增成功
          提示
          关闭弹框
          刷新列表数据
 -->
  <div class="departments">
    <el-card>
      <div class="main">
        <div class="top">
          <div class="name">传智教育</div>
          <div class="manager">负责人</div>
          <!-- 下拉菜单
                 el-dropdown
                    默认插槽：默认展示 的内容
                    具名插槽：下拉 的菜单  dropdown
                      el-dropdown-menu
                         el-dropdown-item
           -->
          <el-dropdown>
            <div class="options">
              操作
              <i class="el-icon-arrow-down" />
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  @click.native="addClick('')"
                >添加子部门</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <!-- el-tree
                 data:树形数据
                 props:{label:'label',children:'children'}
                 作用域插槽  {node,data}  data:当前项的数据：自定义当前项的内容
         -->
        <el-tree
          style="margin-top: 10px"
          :data="list"
          :props="{ label: 'name', children: 'children' }"
        >
          <template v-slot="{ data }">
            <div class="top" style="width: 100%">
              <div class="name">{{ data.name }}</div>
              <div class="manager">{{ data.manager }}</div>
              <!-- 下拉菜单
                 el-dropdown
                    默认插槽：默认展示 的内容
                    具名插槽：下拉 的菜单  dropdown
                      el-dropdown-menu
                         el-dropdown-item
           -->
              <el-dropdown>
                <div class="options">
                  操作
                  <i class="el-icon-arrow-down" />
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      @click.native="addClick(data.id)"
                    >添加子部门</el-dropdown-item>
                    <el-dropdown-item>编辑部门</el-dropdown-item>
                    <el-dropdown-item>删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- 新增弹框组件 -->
    <Add ref="add" :init-list="initList" @getData="getData" />
  </div>
</template>
<script>
import { companyDepartment } from '@/api/departments.js'
import Add from './components/add'
export default {
  components: {
    Add
  },
  data() {
    return {
      list: [],
      initList: []
    }
  },
  // beforeCreate:创建前  实例化创建
  beforeCreate() {},
  created() {
    this.getData()
  },
  methods: {
    // 获取组织架构列表
    async getData() {
      const res = await companyDepartment()
      this.initList = res.data.depts
      this.list = this.changeData(res.data.depts, '')
      // console.table(res.data.depts)
    },
    // 树形数据转换
    changeData(arr, pid) {
      // 找出数据第一层
      return arr.filter((item) => {
        if (item.pid === pid) {
          // 每一项都加一个children
          // 通过递归调用找出它的子集项，子集项的pid是自己的id
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    },
    // 新增点击
    addClick(str) {
      console.log('addClick')
      // 打开弹框
      this.$refs.add.show = true
      // 修改弹框组件内的form的pid
      this.$refs.add.form.pid = str
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  padding: 20px;
  .main {
    padding: 30px 50px;
    .top {
      display: flex;
      align-items: center;
      .name {
        flex: 1;
      }
      .manager {
        width: 120px;
      }
    }
  }
}
</style>
